<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">{{title}}</el-col>
      <el-col :span="17" class="myTextAlignRight">
        <!-- <el-button type="primary" class="myBgGreen" @click="addClassification=true">新增</el-button>
        <el-button type="primary" class="myBgGreen">导入</el-button> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row class="myPaddingTop_10px">
      <template>
        <el-transfer 
          v-model="transferValue" 
          :data="transferData"
          :titles="['所有规则', '启用规则']"
          @change="handleChange">
        </el-transfer>
      </template>
    </el-row>
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="2" class="myLeftMsg">流水号长度:</el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="flowNumber" placeholder="流水号长度">
            <el-option
              v-for="item in flowNumberOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="2" class="myLeftMsg">连接符:</el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="linkNumber" placeholder="连接符">
            <el-option
              v-for="item in linkOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="2" class="myLeftMsg">条码规则:</el-col>
      <el-col :span="22" style="line-height: 40px">
        {{barCode}}
      </el-col>
    </el-row>
    
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <el-button type="primary" class="myBgGreen" @click="seva">保存</el-button>
        <el-button type="primary" class="myBgGreen" @click="defaultSetting">恢复默认设置</el-button>
      </el-col>
    </el-row>

  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
</style>

<script>
  import { getTagRule , updateTagRule } from "@/api/assets";
  export default {
    data(){
      return{
        title:"条码规则设置",
        transferValue:[],
        transferData:[
          {
            label:"所属小区编号",
            key:1
          },
          {
            label:"使用部门编号",
            key:2
          },
          {
            label:"资产分类编号",
            key:3
          },
          {
            label:"购入日期-年(4位)",
            key:4
          },
          {
            label:"购入日期-年(2位)",
            key:5
          },
          {
            label:"购入日期-月",
            key:6
          },
          {
            label:"购入日期-日",
            key:7
          }
        ],
        flowNumberOptions:[
          { label:"3位" , value: 3 },
          { label:"4位" , value: 4 },
          { label:"5位" , value: 5 },
          { label:"6位" , value: 6 }
        ],
        flowNumber:'',
        linkNumber:"",
        linkOptions:[
          { label:"无", value: ''},
          { label:"." , value: '.'},
          { label:"-" , value: '-'},
          { label:"_" , value: '_'}
        ],
        barCode:""

      }
    },
    components: {

    },
    created(){
      document.title=this.title;
      this.ongetTagRule();
    },
    watch: {
      flowNumber(val){
        this.showBarCode(this.transferValue.sort(),val,this.linkNumber);
      },
      linkNumber(val){
        this.showBarCode(this.transferValue.sort(),this.flowNumber,val);
      }
    },
    methods:{
      defaultSetting(){
        this.transferValue=[1,3,5];
        this.flowNumber=4;
        this.linkNumber='';
        this.$message.success("已经恢复默认设置，请确认保存！");
      },
      handleChange(value, direction, movedKeys) {
        let vm=this;
        vm.showBarCode(value.sort(),vm.flowNumber,vm.linkNumber);
      },
      showBarCode(transferValue,flowNumber,linkNumber){
        let vm=this;
        vm.barCode='';
        for(let i=0; i<transferValue.length; i++){
          for(let j=0; j<vm.transferData.length; j++){
            if(vm.transferData[j].key==transferValue[i]){
              vm.barCode+=vm.transferData[j].label+linkNumber;
            }
          }
        }
        vm.barCode+=(flowNumber+'位流水号');
      },
      ongetTagRule(){
        let vm=this;
        getTagRule().then(response => {
          let res=response.data;
          vm.transferValue=JSON.parse(res.rule_used);
          vm.flowNumber=res.serial_length;
          vm.linkNumber=res.conn_symbol;
          vm.showBarCode(vm.transferValue.sort(),vm.flowNumber,vm.linkNumber);
        }).catch(error => {
          vm.$message.error("拉取标签信息失败！" + error.response.data.error_msg);
        })
      },
      seva(){
        let vm=this;
        let params={
          "rule_used": vm.transferValue,
          "serial_length": vm.flowNumber,
          "conn_symbol": vm.linkNumber
        }
        updateTagRule(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！")
        }).catch(error => {
          vm.$message.error("执行失败！" + error.response.data.error_msg);
        })
      }
      
    }
}
</script>

